﻿
@{
    ViewBag.Title = "Settings";
}
<!-- Cropper CSS -->
<link href="~/res/assets/plugins/cropper/cropper.min.css" rel="stylesheet">

<div class="row" id="demo">
    <!-- Column -->
    <div class="col-lg-4 col-xlg-3 col-md-5">
        <div class="card">
            <div class="card-body">
                <center class="m-t-30">
                    <img v-bind:src="TBA_HPHOTO" class="img-circle" width="150" />
                    <h4 class="card-title m-t-10">{{TBA_NAME}}</h4>
                </center>
            </div>
            <div>
                <hr />
            </div>
            <div class="card-body">
                <small class="text-muted">邮箱 </small>
                <h6>{{TBA_EMAIL}}</h6>
                <small class="text-muted p-t-30 db">手机号码</small>
                <h6>{{TBA_IPHONE}}</h6>


            </div>
        </div>
    </div>
    <!-- Column -->
    <!-- Column -->
    <div class="col-lg-8 col-xlg-9 col-md-7">
        <div class="card">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs profile-tab" role="tablist">
                <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab">基本资料</a> </li>
                <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab">密码修改</a> </li>
                <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings" role="tab" onclick="res()">头像</a> </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">



                <div class="tab-pane active" id="home" role="tabpanel">
                    <div class="card-body">
                        <form class="form-horizontal form-material">
                            <div class="form-group">
                                <label class="col-md-12">姓名</label>
                                <div class="col-md-12">
                                    <input type="text" v-model="NewUser.TBA_NAME" placeholder="请输入姓名" class="form-control form-control-line">
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-md-12">手机号码</label>
                                <div class="col-md-12">
                                    <input type="text" v-model="NewUser.TBA_IPHONE" placeholder="请输入手机号码" class="form-control form-control-line">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="example-email" class="col-md-12">邮箱</label>
                                <div class="col-md-12">
                                    <input type="email" v-model="TBA_EMAIL" placeholder="johnathan@admin.com" class="form-control form-control-line" name="example-email" id="example-email" disabled>
                                    
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button class="btn btn-success" type="button" v-on:click="UpU">修改</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!--second tab-->
                <div class="tab-pane" id="profile" role="tabpanel">
                    <div class="card-body">
                        <form class="form-horizontal form-material">

                            <div class="form-group">
                                <label class="col-md-12">密码</label>
                                <div class="col-md-12">
                                    <input type="password" value="password" v-model="NewPas.PAS1" class="form-control form-control-line">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">确认密码</label>
                                <div class="col-md-12">
                                    <input type="password" value="password" v-model="NewPas.PAS2" class="form-control form-control-line">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button class="btn btn-success" type="button" v-on:click="UpPas">更新</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="tab-pane " id="settings" role="tabpanel">


                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <!-- .Your image -->
                                        <div class="col-md-12">
                                            <div class="img-container"><img id="image" :src="TBA_HPHOTO" class="img-responsive" alt="Picture"></div>
                                        </div>
                                        <!-- /.Your image -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-9 docs-buttons">
                            <!-- .btn groups -->
                            <div class="btn-group  mx-sm-2">
                                <button type="button" class="btn btn-success" data-method="zoom" data-option="0.1" title="Zoom In">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="图片放大"> <span class="fa fa-search-plus"></span> </span>
                                </button>
                                <button type="button" class="btn btn-success" data-method="zoom" data-option="-0.1" title="Zoom Out">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="图片缩小"> <span class="fa fa-search-minus"></span> </span>
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-secondary btn-outline" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="图片左移"> <span class="fa fa-arrow-left"></span> </span>
                                </button>
                                <button type="button" class="btn btn-secondary btn-outline" data-method="move" data-option="10" data-second-option="0" title="Move Right">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="图片右移"> <span class="fa fa-arrow-right"></span> </span>
                                </button>
                                <button type="button" class="btn btn-secondary btn-outline" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="图片上移"> <span class="fa fa-arrow-up"></span> </span>
                                </button>
                                <button type="button" class="btn btn-secondary btn-outline" data-method="move" data-option="0" data-second-option="10" title="Move Down">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="图片下移"> <span class="fa fa-arrow-down"></span> </span>
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-secondary btn-outline" data-method="rotate" data-option="-45" title="Rotate Left">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="图片右旋转"> <span class="fa fa-rotate-left"></span> </span>
                                </button>
                                <button type="button" class="btn btn-secondary btn-outline" data-method="rotate" data-option="45" title="Rotate Right">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="图片左旋转"> <span class="fa fa-rotate-right"></span> </span>
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-secondary btn-outline" data-method="scaleX" data-option="-1" title="Flip Horizontal">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="图片左右翻转"> <span class="fa fa-arrows-h"></span> </span>
                                </button>
                                <button type="button" class="btn btn-secondary btn-outline" data-method="scaleY" data-option="-1" title="Flip Vertical">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="图片上下翻转"> <span class="fa fa-arrows-v"></span> </span>
                                </button>
                            </div>

                            <div class="btn-group">

                                <label class="btn btn-secondary btn-outline btn-upload" for="inputImage" title="Upload image file">
                                    <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="上传新头像"> <span class="fa fa-upload"></span> </span>
                                </label>

                            </div>
                            <div class="btn-group btn-group-crop">
                                <button type="button" class="btn btn-danger"  v-on:click="UpHp">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="">
                                        保存头像
                                    </span>
                                </button>

                            </div>
                        </div>
                        <!-- /.btn groups -->

                    </div>



                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
</div>
<script src="~/res/assets/plugins/cropper/cropper.min.js"></script>
<script src="~/res/assets/plugins/cropper/cropper-init.js"></script>
<script>
    
    function res() {
        $("#image").cropper('destroy').cropper({
            aspectRatio: 1 / 1,
            preview: '.img-preview'
        });
    }

    var vm = new Vue({
        el: "#demo",
        data: {
            TBA_NAME: "",
            TBA_IPHONE: "",
            TBA_EMAIL: "",
            TBA_HPHOTO: "",
            NewUser: { TBA_NAME: "", TBA_IPHONE: "" },
            NewPas: {PAS1:"",PAS2:""}
        },
        mounted: function () {
            this.Query();

        },
        methods: {
            Query: function () {
                this.TBA_NAME = getCookie( "TBA_NAME");
                this.TBA_IPHONE = getCookie( "TBA_IPHONE");
                this.TBA_EMAIL = getCookie( "TBA_EMAIL");
                this.TBA_HPHOTO = getCookie( "TBA_HPHOTO") +"?t="+Math.random();
                this.NewUser = { TBA_NAME: this.TBA_NAME, TBA_IPHONE: this.TBA_IPHONE};
            },
            UpU: function () {
                if (this.NewUser.TBA_NAME == "") {
                    swal("提示!", "名称不能为空");
                    return false;
                }
                if (this.NewUser.TBA_IPHONE == "") {
                    swal("提示!", "电话不能为空");
                    return false;
                }
                $.post("../Essential/Settings?act=UpU", this.NewUser,
                    function (data) {
                        data = JSON.parse(data);
                        if (data.status === 0) {
                            swal("操作成功!", "", "success");
                            setUser();
                            vm.Query();
                        } else {
                            swal("提示!", data.message);
                        }
                    });
            },
            UpPas: function () {
                if (this.NewPas.PAS1 != this.NewPas.PAS2) {
                    swal("提示!", "两次密码不一致");
                    return false;
                }
                $.post("../Essential/Settings?act=UpPas", { PAS: this.NewPas.PAS1},
                    function (data) {
                        data = JSON.parse(data);
                        if (data.status === 0) {
                            swal("操作成功!", "", "success");
                            vm.Query();
                        } else {
                            swal("提示!", data.message);
                        }
                    });
                return false;
            },
            UpHp: function () {
                var im = $("#image").cropper("getCroppedCanvas", { width: 300, height: 300 }, null).toDataURL('image/jpeg');
                $.post("../Essential/Settings?act=UpHp", 
                    { img: im},
                    function (data) {
                        data = JSON.parse(data);
                        if (data.status === 0) {
                            swal("操作成功!", "", "success");
                            vm.Query();
                        } else {
                            swal("提示!", data.message);
                        }
                    });
                return false;
            }
        }
    });
</script>

